init();
function init() {
    var sliderBox = document.getElementById("sliderBox");
    var sliderUl = document.getElementById("sliderUl");
    var sliderLists = sliderUl.children;
    var perWid = sliderLists[0].offsetWidth; //每次移动的距离
    var len = sliderLists.length;
    sliderUl.style.width = len * perWid + "px";
    var i = 0;
    var timer = setInterval(sliderMove, 3000);

    function sliderMove() {
        i++;
        //控制123的临界值
        if (i == sliderLists.length) {
            sliderUl.style.left = 0; //在空白出现之前，赶紧让轮播区域显示第一张
            //为了避免第一张显示之后，还是出现空白
            i = 1; //改成1，接下来显示的是第2张
        }
        //控制321的临界值
        if (i == -1) {
            //在空白出现之前，赶紧让轮播区域显示最后一张（补的那一张）
            sliderUl.style.left = -perWid * (len - 1) + "px";
            i = len - 2;
        }
        //小圆点点亮
        circleList[idx].className = "";
        if (i == len - 1) {
            //当出现最后一个区块时，第1个小圆点应当点亮
            circleList[0].className = "hover";
            idx = 0;
        } else {
            circleList[i].className = "hover";
            idx = i;
        }

        //区块移动
        move(sliderUl, "left", -perWid * i);
    }

    //左右箭头
    var oArr = document.getElementById("arr");
    var lArr = oArr.children[0];
    var rArr = oArr.children[1];
    lArr.onclick = function () {
        i -= 2;
        sliderMove();
    };
    rArr.onclick = function () {
        sliderMove();
    };

    //小圆点
    var oCircle = document.getElementById("circle");
    var circleList = oCircle.children;
    var idx = 0; //在给下一个点亮之前的点亮的那个小圆点的索引
    for (let j = 0; j < circleList.length; j++) {
        circleList[j].onmouseover = function () {
            i = j - 1;
            sliderMove();
        };
    }

    //清开定时器

    sliderBox.onmouseover = function () {
        clearInterval(timer);
    };
    sliderBox.onmouseout = function () {
        timer = setInterval(sliderMove, 3000);
    };
}



function move(domobj, attr, tar) {
    clearInterval(domobj.timer);
    domobj.timer = setInterval(function () {
        var cur = parseInt(getComputedStyle(domobj)[attr]);
        var speed = (tar - cur) / 8;
        speed = speed >= 0 ? Math.ceil(speed) : Math.floor(speed);
        domobj.style[attr] = cur + speed + "px";
        if (speed == 0) {
            clearInterval(domobj.timer);
        }
    }, 20);
}


let sliderBox = document.querySelector("#sliderBox")
let arr = document.querySelector("#arr")
let spans = arr.querySelectorAll("span")
spans.forEach(span => {
    span.addEventListener('mouseover', function () {
        sliderBox.style.opacity = '1';
    });

    span.addEventListener('mouseout', function () {

    });
});


// 猜你喜欢上面 zahuo头

window.onload = function () {
    let zahuo = document.querySelector('.zahuo');
    let yidong = zahuo.querySelector('.za_center_top_top');
    let lis = yidong.querySelectorAll('li');
    let jiantou = zahuo.querySelector('.za_center_top_bot');
    let l = jiantou.querySelectorAll('span')[0];
    let r = jiantou.querySelectorAll('span')[1];
    let currentActiveLi = null;

    // 鼠标移入事件处理
    for (let i = 0; i < lis.length; i++) {
        let li = lis[i];

        li.addEventListener('mouseover', function () {

            if (currentActiveLi !== this) {
                if (currentActiveLi) {
                    currentActiveLi.style.backgroundColor = '#fff';
                    currentActiveLi.style.color = 'black';

                }
                this.style.backgroundColor = 'red';
                this.style.color = '#fff';
                currentActiveLi = this;
            }

        });

        li.addEventListener('mouseout', function () {
            if (currentActiveLi === this) {
                return;
            }
            this.style.backgroundColor = '#fff';
            this.style.color = 'black';
        });
    }

    // 左右箭头点击事件处理
    l.addEventListener('click', function () {
        yidong.style.left = '0px';
    });

    r.addEventListener('click', function () {
        yidong.style.left = '-330px';
    });
};




function AG(url, params) {
    return axios({
        baseURL: "http://localhost:8888",
        url,
        params,
    });
}
let arr1 = ['大家电', '其他']
arr1.forEach(function (item) {
    // console.log(item);
    AG("/goods/list", {
        category: `${item}`

    }).then((resData) => {
        resData.data.list.forEach((item) => {
            // console.log(item);
            creatediv(item.img_big_logo, item.title, item.price)
        })
    });
})





function creatediv(imgsrc, title, price) {
    let main_center = document.querySelector('.main_center');

    // 定义要插入的HTML字符串片段
    let html = `
    <a href="detail.html" target="_blank"> 
    <div class="el_top">
        <img src="${imgsrc}" alt="">
    </div>
    <p>${title}</p>
    <div class="el_bot">
        ￥<span>${price}</span><span></span>
    </div>
    </a>
`;
    let div = document.createElement('div');
    div.setAttribute('class', 'el');
    div.innerHTML = html;
    main_center.appendChild(div);
}











